<div nz-row>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px;">
      <nz-card-meta [nzAvatar]="avatarTemplate1" [nzTitle]="data.bjtj.allalert" nzDescription="当前卡控报警">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate1>
      <nz-avatar nzIcon="alert" [nzShape]="'square'" style="background: #2cce4b;" class="sxdgl-titleinfo"></nz-avatar>
      <!-- <i nz-icon nzType="alert" nzTheme="outline" style="background: #2cce4b;"></i> -->
    </ng-template>
  </div>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px">
      <nz-card-meta [nzAvatar]="avatarTemplate2" [nzTitle]="data.bjtj.ckalert" nzDescription="已审核">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate2>
      <!-- <i nz-icon nzType="audit" nzTheme="outline"></i> -->
      <nz-avatar nzIcon="audit" [nzShape]="'square'" style="background: #24cecd;" class="sxdgl-titleinfo"></nz-avatar>
    </ng-template>
  </div>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px">
      <nz-card-meta [nzAvatar]="avatarTemplate3" [nzTitle]="data.bjtj.allalert-data.bjtj.ckalert" nzDescription="未审核">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate3>
      <!-- <i nz-icon nzType="file-search" nzTheme="outline"></i> -->
      <nz-avatar nzIcon="file-search" [nzShape]="'square'" style="background: #ef4d4c;" class="sxdgl-titleinfo">
      </nz-avatar>
    </ng-template>
  </div>
</div>
<!-- 主页面 -->
<div *ngIf="isMainPage; else detailPage" style="background-color:white;padding: 20px;">
  <div nz-row>
    <div nz-col nzSpan="24">
      <form nz-form [formGroup]="validateForm">
        <div nz-row>
          <div nz-col [nzSpan]="24" class="sxdgl-form-flex">
            <nz-form-item nzFlex class="sxdgl-form-item">
              <nz-form-label>部门</nz-form-label>
              <nz-form-control>
                <!-- <input [formControlName]="data.ctrlNames.bm" nz-input placeholder="请选择" /> -->
                <nz-tree-select [formControlName]="data.ctrlNames.bm" style="width: 150px"
                  [nzDefaultExpandedKeys]="expandKeys" [nzNodes]="data.nodes" nzShowSearch
                  (nzTreeClick)="nzTreeClick($event)" nzPlaceHolder="请选择" nzDropdownMatchSelectWidth=false
                  [nzDropdownStyle]="{height:'500px'}">
                </nz-tree-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item nzFlex class="sxdgl-form-item">
              <nz-form-label>任务负责人</nz-form-label>
              <nz-form-control>
                <input [formControlName]="data.ctrlNames.fzr" nz-input placeholder="" />
              </nz-form-control>
            </nz-form-item>
            <nz-form-item nzFlex class="sxdgl-form-item">
              <nz-form-label>是否遗失</nz-form-label>
              <nz-form-control>
                <!-- <input nz-input placeholder="请选择" style="width:80px;" /> -->
                <nz-select [formControlName]="data.ctrlNames.ys" style="width: 80px;" nzAllowClear nzPlaceHolder="请选择">
                  <nz-option nzValue="1" nzLabel="是"></nz-option>
                  <nz-option nzValue="0" nzLabel="否"></nz-option>
                  <nz-option nzValue="" nzLabel="全部"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item nzFlex class="sxdgl-form-item">
              <nz-form-label>下道时间起</nz-form-label>
              <nz-form-control>
                <nz-date-picker [formControlName]="data.ctrlNames.sjStart"></nz-date-picker>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item nzFlex class="sxdgl-form-item">
              <nz-form-label>下道时间止</nz-form-label>
              <nz-form-control>
                <nz-date-picker [formControlName]="data.ctrlNames.sjEnd"></nz-date-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>

        <div nz-row>
          <div nz-col [nzSpan]="24" style="text-align: right;">
            <button nz-button [nzType]="'primary'" (click)="query(true)">查询</button>
            <button nz-button [nzType]="'primary'" (click)="delete_all($event)">删除选中</button>
            <button nz-button [nzType]="'primary'">导出</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="24">

      <nz-table #basicTable [nzScroll]="lockHeadScroll" [nzData]="data.tableData" [nzFrontPagination]="false"
        [nzTotal]="data.tableTotal" [(nzPageSize)]="data.tablePagination.rows" nzShowSizeChanger
        [nzShowPagination]="true" [(nzPageIndex)]="data.tablePagination.page" (nzPageIndexChange)="nzPageIndexChange()"
        (nzPageSizeChange)="setPageSize()" nzSize="small" nzBordered [nzShowTotal]="totalTemplate">
        <ng-template #totalTemplate let-total> 总共 {{ data.tableTotal }} 条数据 </ng-template>
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="50px">选择</th>
            <th nzAlign="center" nzWidth="10%">任务名称</th>
            <th nzAlign="center" nzWidth="10%">车间</th>
            <th nzAlign="center" nzWidth="10%">工区</th>
            <th nzAlign="center" nzWidth="10%">上传方式</th>
            <th nzAlign="center" nzWidth="10%">下道检查结果</th>
            <th nzAlign="center" nzWidth="10%">工具清点人</th>
            <th nzAlign="center" nzWidth="10%">工具上道时间</th>
            <th nzAlign="center" nzWidth="10%">工具下道时间</th>
            <th nzAlign="center">备注</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data;let i = index" (dblclick)="changePage(i)" nz-tooltip
            nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom" style="cursor:pointer">
            <td nzShowCheckbox [(nzChecked)]="checkStatus[i]"></td>
            <td nzAlign="center">{{ data.TaskName }}</td>
            <td>{{ data.ShopName }}</td>
            <td nzAlign="center">{{ data.AreaName }}</td>
            <td>{{ data.IsLine }}</td>
            <td>{{ data.MissingTools }}</td>
            <td>{{ data.Name }}</td>
            <td nzAlign="center">{{ data.BeforeWorkScanDateTime |date:dateFormat}}</td>
            <td nzAlign="center">{{ data.AfterWorkScanDateTime |date:dateFormat}}</td>
            <td>{{ data.Remark }}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>

<!-- 详情页面 -->
<ng-template #detailPage>
  <div style="background-color:white;padding: 20px;">

    <div nz-row>
      <div nz-col nzSpan="24" style="display:flex;justify-content: space-between;">
        <span class="sxdgl-detail-tabletitle">上下道管理-详情查看</span>
        <button nz-button [nzType]="'primary'" (click)="changePage()">返回</button>
      </div>
    </div>


    <div nz-row>
      <table *ngFor="let _data of [data.tableData[data.detailInfo.index]]" class="sxdgl-detail-maintable">
        <tr>
          <td class="sxdgl-detail-lable">任务名称</td>
          <td class="sxdgl-detail-value">{{_data.TaskName }}</td>
          <td class="sxdgl-detail-lable">工具清点人</td>
          <td class="sxdgl-detail-value">{{ _data.Name }}</td>
          <td class="sxdgl-detail-lable">车间</td>
          <td class="sxdgl-detail-value">{{ _data.ShopName }}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">工具上道时间</td>
          <td class="sxdgl-detail-value">{{_data.BeforeWorkScanDateTime |date:dateFormat}}</td>
          <td class="sxdgl-detail-lable">工具下道时间</td>
          <td class="sxdgl-detail-value">{{_data.AfterWorkScanDateTime |date:dateFormat}}</td>
          <td class="sxdgl-detail-lable">工区</td>
          <td class="sxdgl-detail-value">{{ _data.AreaName }}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">工具箱</td>
          <td class="sxdgl-detail-value"></td>
          <td class="sxdgl-detail-lable">上传方式</td>
          <td class="sxdgl-detail-value">{{ _data.IsLine}}</td>
          <td class="sxdgl-detail-lable">下道检查结果</td>
          <td class="sxdgl-detail-value">{{ _data.MissingTools }}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">备注</td>
          <td colspan="5" class="sxdgl-detail-value">{{ _data.Remark }}</td>
        </tr>
      </table>
    </div>

    <!-- 详情页附表 -->
    <div nz-row *ngFor="let item of data.detailInfo.data" class="sxdgl-detail-subtable">
      <div nz-col nzSpan="24">
        <span class="sxdgl-detail-tabletitle">{{item.EquiSortName}} 工具箱序号：{{item.ToolBoxNo}}</span>
        <nz-table #detailSub [nzScroll]="lockHeadScroll" [nzData]="data.tableData" nzShowPagination="false"
          nzSize="small" nzBordered="false" nzBordered>
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="20%">工具类型</th>
              <th nzAlign="center" nzWidth="10%">行号</th>
              <th nzAlign="center" nzWidth="20%">工具名称</th>
              <th nzAlign="center" nzWidth="20%">状态</th>
              <th nzAlign="center">备注</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let _item of item.outtoolItems; let i=index">
              <td *ngIf="i==0" [attr.rowspan]="item.outtoolItems.length">{{item.ToolBoxTypeNo}}</td>
              <td>{{i+1}}</td>
              <td nzAlign="center">{{_item}}</td>
              <td nzAlign="center">{{item.MissingTools=="1"?"未遗失":"遗失"}}</td>
              <td *ngIf="i==0" [attr.rowspan]="item.outtoolItems.length">{{item.Remark}}</td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>

  </div>

</ng-template>